<template>
  <div class="page_yz">
  <div class="content_idch">
    <div class="crumbs">
      <span>身份认证</span>
    </div>
    <div v-if="(identifys=='0'||identifys=='3')">
      <div class="text-panel">
      <template>
        <dl>
          <dd>为了您的账户资金安全,请您登记实名认证信息。</dd>
          <dd>请注意,信息一经登记,无法修改,之后办理提现,账号验证等业务信息必须与登记信息相符,请务必如实填写。</dd>
        </dl>
      </template>
    </div>
    <div class="post_indet">

      <el-row :gutter='20' type="flex" class="row-bg" justify="space-around" style="display:none">
        <el-col :span="9">
          <span class="identityCard" v-text="'上传身份证正面 :'"></span>
          <div
            element-loading-background="rgba(0, 0, 0, 0.4)"
            v-loading='showLoading_1'
            class="p-rel upload-zone"
          >
            <input
              class="upload-input abs-vh-center"
              type="file"
              @change="uploadId('1',$event)"
              value=""
              accept="image/png,image/gif,image/jpeg"
            />
            <button
              v-show="!hideUploadBtn_1"
              class="btn-inline abs-vh-center btn-large btn-danger"
            >
            </button>
            <img
              :style="defaultImg_1"
              class="image-preview"
              :src="formData.faceIdPhoto"
              alt=""
            >
          </div>
          <p class="remark">请确保照片的内容完整并清晰可见</p>
        </el-col>
        <el-col :span="9">
          <span class="identityCard" v-text="'上传身份证反面 :'"></span>
          <div
            element-loading-background="rgba(0, 0, 0, 0.4)"
            v-loading='showLoading_2'
            class="p-rel upload-zone"
          >
            <input
              class="upload-input abs-vh-center"
              type="file"
              accept="image/png,image/gif,image/jpeg"
              @change="uploadId('2',$event)"
              value=""
            />
            <button
              v-show="!hideUploadBtn_2"
              class="btn-inline abs-vh-center btn-large btn-danger"
            >
            </button>
            <img
              :style="defaultImg_2"
              class="image-preview"
              :src="formData.backIdPhoto"
              alt=""
            >
          </div>
          <p class="remark">请确保照片的内容完整并清晰可见</p>
        </el-col>
        <el-col :span="8" style="display:none">
          <span class="identityCard" v-text="'手持身份证件照片 :'"></span>
          <div
            element-loading-background="rgba(0, 0, 0, 0.4)"
            v-loading='showLoading_3'
            class="p-rel upload-zone"
          >
            <input
              class="upload-input abs-vh-center"
              type="file"
              accept="image/png,image/gif,image/jpeg"
              @change="uploadId('3',$event)"
              value=""
            />
            <button
              v-show="!hideUploadBtn_3"
              class="btn-inline abs-vh-center btn-large btn-danger"
            >
            </button>
            <img
              :style="defaultImg_3"
              class="image-preview"
              :src="formData.fullPhoto"
              alt=""
            >
          </div>
          <p class="remarks">请您上传一张手持身份证正面照和个人签字的照片,个人签字的内容包含"平台名称"和当前日期,请确保照片和个人签字的内容清晰可见。</p>
        </el-col>
      </el-row>
      <div class="name_form">
        <h1>提交表单</h1>
        <div class="md_nameform">
          <el-form ref="form" :model="formData" label-width="80px">
            <el-form-item label="姓名">
              <el-input v-model="formData.name" maxlength='10' :placeholder='$t("fullname")||"请输入您的姓名"'></el-input>
            </el-form-item>
            <el-form-item label="证件号码">
              <el-input v-model="formData.cardnumber" maxlength='22' :placeholder='$t("idNumber")||"请输入证件号码"'></el-input>
            </el-form-item>
            <el-form-item label="银行卡号">
              <el-input v-model="formData.bankcard" maxlength='25' :placeholder='$t("idNumber")||"请输入银行卡号"'></el-input>
            </el-form-item>
            <el-form-item>
              <el-button type="primary" @click="submitForm">立即提交</el-button>
            </el-form-item>
          </el-form>
        
        </div>  
      </div>
    </div>

    </div>
    <div class="states" v-if="identifys=='1'||'2'">
      <div class="state_info">
        <img v-if="identifys=='1'" src="../../assets/images/personalCenter/audit.png" alt="">
        <img v-if="identifys=='2'" src="../../assets/images/personalCenter/pass.png" alt="">
        <p v-if="identifys=='1'">认证信息正在认证审核中</p>
        <p v-if="identifys=='2'">您已实名认证</p>
        <div v-show="identifys=='2'" class="show_num">
          <p>姓名：{{userinfo.username}}</p>
          <p>证件号码：*************</p>
        </div>
      </div>
    </div>
  </div>
  </div>
</template>
<script>
import axios from "axios";
export default {
  data() {
    const bg_1 = require("@/assets/images/personalCenter/my_ZM.png");
    const bg_2 = require("@/assets/images/personalCenter/my_FM.png");
    const bg_3 = require("@/assets/images/personalCenter/my_ZF.png");
    return {
      defaultImg_1: `background-image:url(${bg_1})`,
      defaultImg_2: `background-image:url(${bg_2})`,
      defaultImg_3: `background-image:url(${bg_3})`,
      identifys: '3',
      bindState: "",
      formData: {
        name: "",
        faceIdPhoto: "123",
        backIdPhoto: "123",
        fullPhoto: "123",
        confirmName: "",
        cardnumber: ""
      },
      userinfo:{},
      hideUploadBtn_1: false,
      hideUploadBtn_2: false,
      hideUploadBtn_3: false,
      showLoading_1: false,
      showLoading_2: false,
      showLoading_3: false,
    };
  },
  mounted() {
    // this.getState();
    this.getuserinfo();
    // this.init();
  },
  methods: {
    uploadId(id, e) {
      e.preventDefault();
      let file = e.target.files[0];
      let { name, size, type } = file;
      let formData = new FormData();
      let options = {
        headers: {
          "Content-Type": "MultipartFile/form-data"
        },
        method: "post"
      };
      if (!/\.(jpg|png)$/.test(name)) {
        this.$message.error("图片格式需为jpg或者png");
        return;
      }
      if (size > 4 * Math.pow(1024)) {
        this.$message.error(
          `图片大小不可超过4M,当前图片大小${size / Math.pow(1024, 2)}M`
        );
        return;
      }
      formData.append("imgurl", file);
      options.data = formData;
      switch (id) {
        case "1": // 传输正面
          options.url = `${this.api.baseURL}/user/img`;
          this.showLoading_1 = true;
          this.hideUploadBtn_1 = true;
          axios(options).then(res => {
            this.showLoading_1 = false;
            if (res.code == "0") {
              this.successMsg(res.msg || "上传成功");
              // this.formData.faceIdPhoto = res.data.data.result;
              let imgs = res;
              imgs.data.forEach(data => {
                this.formData.faceIdPhoto = data.url;
              });
              
            }
          });
          break;
        case "2": // 传输背面
          options.url = `${this.api.baseURL}/user/img`;
          this.showLoading_2 = true;
          this.hideUploadBtn_2 = true;
          axios(options).then(res => {
            this.showLoading_2 = false;
            if (res.code == "0") {
              this.successMsg(res.msg || "上传成功");
              // this.formData.backIdPhoto = res.data.data.result;
              let imgs = res;
              imgs.data.forEach(data => {
                this.formData.backIdPhoto = data.url;
              });
            }
          });
          break;
        case "3": // 传输手持证件照
          options.url = `${this.api.baseURL}/user/img`;
          this.showLoading_3 = true;
          this.hideUploadBtn_3 = true;
          axios(options).then(res => {
            this.showLoading_3 = false;
            if (res.data.code == "0") {
              this.successMsg(res.msg || "上传成功");
              // this.formData.fullPhoto = res.data.data.result;
              let imgs = res.data;
              imgs.data.forEach(data => {
                this.formData.fullPhoto = data.url;
              });
            }
          });
          break;
      }
    },
    verifyId() {
      this.request(this.api.updaterealyname, {
        fm: this.formData.faceIdPhoto,
        zm: this.formData.backIdPhoto,
        sc: this.formData.fullPhoto,
        username: this.formData.name,
        idcard: this.formData.cardnumber,
        bankcard:this.formData.bankcard,
        showLoading: true
      }).then(res => {
        if (res.code == "0") {
          this.successMsg(res.msg || "操作成功");
          this.formData.faceIdPhoto = "";
          this.formData.backIdPhoto = "";
          this.formData.fullPhoto = "";
          this.formData.name = "";
          this.formData.cardnumber = "";
          this.bindState.idcardstate = "1";
          // this.navigateTo("/");
          this.getuserinfo();
        } else {
          this.errMsg(res.msg || "操作失败");
        }
      });
    },
    getuserinfo() {
      this.request(this.api.getuserinfo).then(res => {
        if(res.code==0){
          this.userinfo=res.data[0];
          // 实名认证：0：未认证；1：审核中；2：审核通过；3：审核不通过；、
          //实名认证： 未认证：no；审核中：review；已完成：completed；驳回：reject）  
          let idcardType =res.data[0].idcardstate;
          // this.identifys = res.data[0].idcardstate;
          console.log(idcardType);
          if(res.data[0].idcardstate == 'no') {
            this.identifys='0';
            // this.successMsg('您正在认证审核中');
          }
          if(res.data[0].idcardstate == 'review') {
            this.identifys='1';
            this.successMsg('您正在认证审核中');
          }
          if(res.data[0].idcardstate == 'completed') {
            this.identifys='2';
            this.successMsg('您已实名认证')
          }
          if(res.data[0].idcardstate == 'reject') {
            this.identifys='3';
            this.errMsg('审核未通过,请重新认证');
            this.open();
          }
        }
      })
    },
    open() {
        this.$confirm('审核未通过,请重新认证, 是否重新认证?', '提示', {
          confirmButtonText: '确定',
          cancelButtonText: '取消',
          type: 'warning'
        }).then(() => {
        }).catch(() => {
          this.$message({
            type: 'info',
            message: '已取消'
          });          
        });
      },
    submitForm() {
      // 验证
      if (!this.Util.isIdCard(this.formData.cardnumber)) {
        this.errMsg("label147");
        return false;
      }
      if (!this.Util.isBankNo(this.formData.bankcard)) {
        this.errMsg("请输入正确的银行卡号");
        return false;
      }
      if (this.bindState.idcardstate == "1") {
        this.$alert(this.$t("label148"));
        return false;
      }

      this.verifyId();
    },
    // init(){
      // this.request(this.api.getuserinfo).then(res=>{
        // console.log(res.data.userinfo)
        //  this.formData.name=res.data.userinfo[0].username;
        //  this.formData.confirmName=res.data.userinfo[0].username;
        //  this.formData.cardnumber=res.data.userinfo[0].idcard
      // })
    // }
  }
};
</script>

<style lang="scss" scoped>
.page_yz{
  background: #f2f3f8;padding: 30px 0;
}
.content_idch {
    width: 1200px;
    margin: 0 auto;
    position: relative;
    z-index: 3;
}
.crumbs {
    height: 60px;
    line-height: 60px;
    padding: 0 30px;
    margin-bottom: 20px;
    font-size: 20px;
    font-weight: 400;
    background: #ffffff;
}
.title {
  border-bottom: 1px solid #303030;
  padding-bottom: 12px;
  color: #C5C5C5;
}

.image-preview {
  width: 100%;
  height: 100%;
  background-position: center center;
  background-repeat: no-repeat;
}
.text-panel {
  background: #ffffff;padding:10px;
  dl {
    margin-top: 0px;
    dd {
      line-height: 20px;
      color: #6C6C6C;
    }
  }
}
.identityCard {
  color: #BDBDBD;
}
.remark {
  color: #6C6C6C;
  letter-spacing: 1px;
  margin: 15px 0;
}
.remarks {
  color: #6C6C6C;
  text-align: left;
  margin: 10px 0;
  line-height: 22px;
}
.el-form-item__content {
  display: inline-block;
}
.el-col {
  text-align: center;
}
.el-row {
  margin-bottom: 20px;
  .el-col {
    margin-top: 42px;
  }
  .upload-zone {
    height: 220px;
    margin-top: 20px;
    border: 1px dashed #bbbbbb;
    button {
      width: 60px;
      height: 60px;   
      margin: 0;
      opacity: 0.8;
      border-radius: 50%;
      background: url('../../assets/images/personalCenter/my_add.png')no-repeat center center;
      background-size: 100% 100%;
    }
  }
  .upload-input {
    opacity: 0;
    z-index: 999;
    height: 40px;
    cursor: pointer;
  }
}
.el-form-item {
  text-align: right;
}
.el-form {
  width: 75%;
}
span.color-warning {
  color: #b72026;
}
button {
  width: 75%;
  margin-top: 20px;
  background-color: #DFB77C!important;
  float: right;
}
.states {
  height: 700px;
  .state_info{
    background: #ffffff;padding: 50px 0;
  }
  .show_num{
    p{font-weight: 500;font-size: 14px;}
  }
  img {
    width: 60px;display: block;margin: 30px auto;
  }
  p {
    font-size: 25px;
    letter-spacing: 1px;
    font-weight: bold;
    margin-top: 10px;
    text-align: center;
    color: #333333;
  }
}
.post_indet{
  background: #ffffff;
}
.name_form{
  h1{background: #f2f3f8;height: 30px;line-height: 30px;font-size: 18px;padding: 10px;}
  .md_nameform{padding: 30px 0;}
}
</style>
